import {Divider, Form, Input, Select, Space, TableColumnsType} from 'antd';
import {Button, Flex, Table, Tag} from "antd";
import {PlusOutlined, SwapOutlined} from "@ant-design/icons";
import {Fragment, useEffect, useRef, useState} from "react";
import {delMenuUrl, getAllMenuListUrl} from "@/api/system/menu.ts";
import {buildTreeData} from "@/utils/tree.ts";
import {DataNode} from "antd/es/tree";
import SvgIcon from "@/components/SvgIcon";
import EditDialog from "./editDialog";
import {getModalSystemConfig, globalMessageApi, globalModalApi} from "@/components/OpComponent/Message";
import {DefinePage, PageWrapper, PageWrapperBox, SearchFormBox, TableContainerBox} from "@/layout/Page";

export default function Menu() {

    const [data, setData] = useState<DataType[]>([])
    const [loading, setLoading] = useState(false)

    const editDialogRef = useRef<any>()

    interface DataType {
        menuId: React.ReactNode;
        menuName: string;
        orderNum: number;
        menuType: string;
        perms: string,
        icon: string;
        component: string;
        children?: DataType[];
    }

    const handleMenuList = () => {
        setLoading(true)
        getAllMenuListUrl(null).then((req: any) => {
            const rootMenu = {id: 0, label: '主类目', children: [] as DataNode[], value: 0};
            // 将其整理一下，获取对应的菜单树型结构
            const tree = buildTreeData(req.data, 'menuId', 'menuName', '', '', '')
            console.log("tree", tree)
            rootMenu.children = tree
            setData(tree)
        }).finally(() => {
            setLoading(false)
        })
    }
    const handleDelete = async (menuId: any) => {
        const confirmed = await globalModalApi.confirm(getModalSystemConfig("是否删除该菜单?"));
        if (confirmed) {
            delMenuUrl(menuId).then((res: any) => {
                globalMessageApi.success(res.msg)
                handleMenuList()
            })
        }
    }

    useEffect(() => {
        handleMenuList()
    }, []);


    const columns: TableColumnsType<DataType> = [
        {title: '菜单名称', dataIndex: 'menuName', key: 'menuName', ellipsis: true, align: "center", minWidth: 160},
        {
            title: '图标',
            dataIndex: 'icon',
            key: 'icon',
            align: "center",
            ellipsis: true,
            width: 150,
            render: (text: any, _: any, index: number) => {
                return <Fragment key={index}>
                    <SvgIcon name={text} size={20}/>
                </Fragment>
            }
        },
        {title: '排序', dataIndex: 'orderNum', key: 'orderNum', align: "center", ellipsis: true, width: 50},
        {title: '权限标识', dataIndex: 'perms', key: 'perms', align: "center", ellipsis: true, width: 50},
        {title: '组件路径', dataIndex: 'component', key: 'component', align: "center", ellipsis: true, width: 150},
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: "center",
            ellipsis: true,
            width: 150,
            render: (text: any) => {
                return text === 0 ? <Tag color={"warning"}>禁用</Tag> :
                    <Tag color={"green"}>启用</Tag>
            }
        },
        {title: '创建时间', dataIndex: 'createTime', key: 'createTime', align: "center", ellipsis: true, width: 150},
        {
            title: '操作',
            key: 'op',
            align: "center",
            fixed: 'right',
            ellipsis: true,
            minWidth: 150,
            render: (_, record, index: number) => {
                return <Space key={index}>
                    <a type={"link"} onClick={() => editDialogRef.current.addModal(record)}>新增</a>
                    <a type={"link"} onClick={() => editDialogRef.current.editModal(record)}>编辑</a>
                    <a type={"link"} className={"text-red-500"} onClick={() => handleDelete(record.menuId)}>删除</a>
                </Space>
            }
        }
    ]

    return (<PageWrapperBox>
            <TableContainerBox>
                <Flex gap="small" vertical>
                    <Form layout={"inline"}>
                        <Form.Item label="菜单名称">
                            <Input placeholder="请输入菜单名称"></Input>
                        </Form.Item>
                        <Form.Item label="状态">
                            <Select style={{width: 160}} placeholder="请选择角色状态"></Select>
                        </Form.Item>
                        <Form.Item>
                            <Space>
                                <Button type="primary">查询</Button>
                                <Button>重置</Button>
                            </Space>
                        </Form.Item>
                    </Form>
                    <Divider style={{margin: "8px"}}/>
                </Flex>
                <Flex align="center" gap="small" style={{marginBottom: 6}}>
                    <Button type={"primary"} icon={<PlusOutlined/>}
                            onClick={() => editDialogRef.current.addModal()}>新增</Button>
                    <Button type={"default"} icon={<SwapOutlined/>}>展开/折叠</Button>
                </Flex>
                <Table
                    rowKey="menuId"
                    loading={loading}
                    tableLayout="auto"
                    dataSource={data}
                    columns={columns}
                    scroll={
                        {x: 'auto'}
                    }
                    pagination={false}
                >
                </Table>
            </TableContainerBox>

            <EditDialog ref={editDialogRef} getList={handleMenuList}/>
        </PageWrapperBox>
    )
}
